<template>
  <view class="pageContent">
    <view class="setSwi">
      <view class="houseMain">
        <view class="houseFace">人脸开门<text class="houseFaceSta" v-if="formData.faceSwitch==2"
            @click="goDoorList">查看审核结果</text></view>
        <view class="houseMsg" v-if="formData.faceSwitch==0">打开上传人脸照片</view>
        <view class="houseMsg" v-if="formData.faceSwitch==1">上传人脸照校验中</view>
        <view class="houseMsg" v-if="formData.faceSwitch==2">请再上传人脸照片</view>
        <view class="houseMsg" v-if="formData.faceSwitch==3">正在使用人脸识别开门</view>
      </view>
      <!-- 人脸同步状态0:未录入1:待审核2:审核失败3:审核通过 -->
      <view class="houseRight">
        <!-- <view >{{formData.faceSwitch}}</view> -->
        <view v-if="formData.faceSwitch==1" @click="imagePhoto">待审核</view>
        <view class="houseRightFail" v-if="formData.faceSwitch==2">审核失败</view>
        <!-- <view v-if="formData.faceSwitch==3">审核通过</view> -->
        <image class="switchImg" v-if="formData.faceSwitch!=1 && formData.faceSwitch!=3" :src="images +'/switchOff.png'"
          mode="widthFix" @click="imagePhoto" />
        <image class="switchImg" v-if="formData.faceSwitch==3" :src="images +'/switchOn.png'" mode="widthFix"
          @click="faceOff" />
        <!--        <switch class="switchTab" v-if="formData.faceSwitch!=1 && formData.faceSwitch!=1" color="#1086FF" :checked="formData.faceSta" @change="inputChange"
          id="faceSwitch" disable="true">
        </switch> -->
      </view>
    </view>
    <view class="setSwi">
      <view class="houseMain">
        <view class="houseFace">访客通知</view>
        <view class="houseMsg">关闭将接收不到远程通知</view>
      </view>
      <view class="houseRight">
        <image class="switchImg" v-if="formData.visitorNotifySwitch==0" :src="images +'/switchOff.png'" mode="widthFix"
          @click="notifySwi(1)" />
        <image class="switchImg" v-if="formData.visitorNotifySwitch==1" :src="images +'/switchOn.png'" mode="widthFix"
          @click="notifySwi(0)" />
        <!--       <switch class="switchTab" color="#1086FF" :checked="formData.visitorNotifySwitch" @change="inputChangeNot"
          id="visitorNotifySwitch">
        </switch> -->
      </view>
    </view>
    <view class="setAbou" @click="AboutUs">
      <view class="houseFace">关于我们</view>
      <view class="rightArrow"></view>
    </view>

    <button class="btOne btBottom" @click="loginOut">退出登录</button>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        formData: {
          visitorNotifySwitch: 0,
          faceSta: 0,
        },
        room: '',
        faceUrl: '',
      }
    },
    computed: {
      ...mapState({
        myInfo: state => state.user.myInfo
      })
    },
    onLoad() {
      var room = wx.getStorageSync('room');
      console.warn('room', room)
      this.room = room;

    },
    onShow() {
      util.socketTest();
      this.systemSetting();
    },
    methods: {
      loginOut() {
        // wx.removeStorageSync('token');
        var userInfo = wx.getStorageSync('userInfo'); //缓存头像信息，传递给下一个页面，然后在保存本地
        wx.clearStorageSync();
        // wx.setStorageSync('userInfo');
        wx.closeSocket()
        wx.onSocketClose(function(res) {
          console.warn('WebSocket 已关闭！')
        })
        wx.redirectTo({
          url: '/pages/bindLogin/main' + '?userInfo=' + JSON.stringify(userInfo)
        })
      },
      inputChange(e) {
        var e = e.mp
        var value = e.detail.value
        console.warn('value', value)
      },
      inputChangeNot(e) {
        var e = e.mp
        var value = e.detail.value
        this.formData.visitorNotifySwitch = value
        this.notifySwitch();
      },
      notifySwi(index) {
        this.notifySwitch(index);
      },
      addMem() {
        wx.navigateTo({
          url: '/pages/subMe/addMem/main'
        })
      },
      notifySwitch(index) {
        var self = this;
        var roomId = this.room.roomId;
        var notifySwitch = index;
        var params = {
          notifySwitch: notifySwitch,
          roomId: roomId,
        }
        if (index == 0) {
          var paramUrl = util.stringifyQs(params)
          util.wxRequestPro('/UserServer/owner/info/notifySwitch?' + paramUrl, {}, 'PUT')
            .then((res) => {
              console.warn('notifySwitch', res)
              this.systemSetting();
            })
        }
        if (index == 1) {
          var paramUrl = util.stringifyQs(params)
          util.wxRequestPro('/UserServer/owner/info/notifySwitch?' + paramUrl, {}, 'PUT')
            .then((res) => {
              console.warn('notifySwitch', res)
              self.systemSetting();
            })
          this.onSub().then(() => {})
        }
      },

      faceSwitch(params, type = 0) {
        var self = this;
        var paramUrl = util.stringifyQs(params)
        util.wxRequestPro('/UserServer/owner/info/faceSwitch?' + paramUrl, {}, 'PUT')
          .then((res) => {
            console.warn('faceSwitch', res)
            this.systemSetting().then(() => {
              if (type == 0) {
                wx.showToast({
                  title: "图片上传成功，请等待审核",
                  icon: 'none'
                });
              }
              if (type == 1) {
                wx.showToast({
                  title: "人脸识别关闭成功",
                  icon: 'none'
                });
              }
            });

          })
      },
      systemSetting() {
        return new Promise((resolve, reject) => {
          var params = {
            roomId: this.room.roomId,
          }
          util.wxRequestPro('/UserServer/owner/info/systemSetting', params)
            .then((res) => {
              console.warn('systemSetting', res)
              var param = res.param
              this.formData = param;
              //下面两种方式会出现faceSwitch值更新，界面ui不更新问题
              // this.formData.visitorNotifySwitch=param.visitorNotifySwitch
              // this.formData.faceSwitch=param.faceSwitch
              // Object.assign(this.formData,param)
              console.warn('this.formData', this.formData, this.formData.faceSwitch)
              //3:审核通过
              if (param.faceSwitch == 3) {
                this.formData.faceSta = true
              } else {
                this.formData.faceSta = false
              }
            })
        })
      },
      //图片上传
      imagePhoto() {
        // if(this.formData.faceSwitch==1 || param.faceSwitch==3) {
        //   return;
        // }
        var self = this;
        var token = wx.getStorageSync('token');
        wx.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success(res) {
            const tempFilePaths = res.tempFilePaths
            var src = res.tempFilePaths[0];
            // 方案1：跳转裁剪控件，IOS机型卡顿
            wx.navigateTo({url:'/pages/subMe/imageCropper/main'+'?src='+src+'&type=1'})
            return
            // 方案2：图片压缩后上传
            wx.compressImage({
              src: src,
              quality: 50,
              success(res) {
                console.warn('src', src)
                self.formData.faceSta = false;
                util.uploadFile(src).then((res) => {
                  var param = res;
                  self.faceUrl = param.filePath;
                  var params = {
                    faceSwitch: 1,
                    faceUrl: self.faceUrl,
                  }
                  self.faceSwitch(params);
                  self.onSubFace();
                })
              }
            })

          },
          fail(res) {
            console.warn('fail', res)
            //重置勾选状态
            self.formData.faceSta = false;
          },
          complete(res) {
            console.warn('complete', res)
          }
        })
      },
      //关闭人脸上传开关
      faceOff() {
        var params = {
          faceSwitch: 0,
          faceUrl: '',
        }
        this.faceSwitch(params, 1);
      },
      //订阅消息
      onSub() {
        return new Promise((resolve, reject) => {
          wx.requestSubscribeMessage({
            tmplIds: config.tmplIds,
            success(res) {
              console.warn('res', res)
              var value = Object.values(res);
              if (value[0] == 'accept') {
                resolve()
                wx.setStorageSync('hasSub', 1);
              } else {
                resolve()
                // wx.showToast({
                //     title: "请在设置中打开通知管理开关",
                //     icon: 'none',
                //     duration: 2000,
                // });
                wx.setStorageSync('hasSub', 2);
              }
            },
            fail(res) {
              console.warn('fail=res', res)
              if (res.errCode == 20004) {
                // 用户关闭了主开关，无法进行订阅
                wx.showToast({
                  title: "请在设置中打开通知管理开关",
                  icon: 'none',
                  duration: 2000,
                });
              }
              wx.setStorageSync('hasSub', 2);
            },
          })
        })
      },
      //订阅消息-人脸审核失败的
      onSubFace() {
        return new Promise((resolve, reject) => {
          wx.requestSubscribeMessage({
            tmplIds: ['gvTQCeG0gx14Av9asdh_KdqULQ9WwRpTlkHYXB5OQM4'],
            success(res) {
              console.warn('res', res)
              var value = Object.values(res);
              resolve()
            },
            fail(res) {
              console.warn('fail=res', res)
              if (res.errCode == 20004) {
                // 用户关闭了主开关，无法进行订阅
                wx.showToast({
                  title: "请在设置中打开通知管理开关",
                  icon: 'none',
                  duration: 2000,
                });
              }
            },
          })
        })
      },
      goDoorList(index) {
        wx.navigateTo({
          url: '/pages/subMe/doorList/main'
        })
      },
      AboutUs() {
        wx.navigateTo({
          url: '/pages/subMe/AboutUs/main'
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
  .pageContent {

    padding: 50rpx 30rpx 0rpx 30rpx;
  }

  .setSwi {
    display: flex;
    justify-content: space-between;
    padding: 0rpx 0rpx 60rpx 0rpx;
  }

  .houseRight {
    display: flex;
    align-items: center;
  }

  .houseRightFail {
    font-size: 30rpx;
    color: #FF6E5D;
  }

  .switchImg {
    height: 72rpx;
    width: 72rpx;
    margin-left: 10rpx;
  }

  .switchTab {
    display: inline-block;
    /* scale修改switch大小，默认margin-right: -30rpx */
    transform: scale(0.66);
    margin-right: -30rpx;
  }

  .houseMain {
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .houseFace {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    line-height: 42rpx;
    padding-bottom: 6rpx;
  }

  .houseFaceSta {
    background: #FF6E5D;
    border-radius: 32rpx;
    font-size: 22rpx;
    color: #FFFFFF;
    padding: 2rpx 10rpx 2rpx 10rpx;
    margin: 0rpx 0rpx 0rpx 10rpx;
  }

  .houseMsg {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    line-height: 30rpx;
  }

  .setAbou {
    position: relative;
    padding: 20rpx 0rpx 20rpx 0rpx;
  }

  .rightArrow {
    height: 24rpx;
    width: 24rpx;
    top: 25rpx;
    right: 10rpx;
  }

  .houseTil {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 14rpx 14rpx 14rpx;
    line-height: 45rpx;
    font-size: 32rpx;
    color: #030303;
    border-bottom: 0.3rpx solid #E7E7E7;
  }

  .houseNo {
    padding: 14rpx 14rpx 14rpx 14rpx;
    font-size: 32rpx;
    color: #030303;
    border-bottom: 0.3rpx solid #E7E7E7;
  }

  .houseMes {
    display: flex;
    padding: 14rpx 0rpx 14rpx 0rpx;
  }

  .houseMesIt {
    height: 40rpx;
    line-height: 40rpx;
    background: #F2F8FF;
    border-radius: 6rpx;
    border: 1px solid #BCDEFF;
    color: #519AEE;
    font-size: 28rpx;
    margin-right: 10rpx;
    padding: 0rpx 14rpx 0rpx 14rpx;
  }

  .handler {
    display: flex;
    justify-content: flex-end;
    padding: 14rpx 14rpx 20rpx 14rpx;
    width: 100%;
  }

  .handlerCha {
    height: 60rpx;
    width: 160rpx;
    line-height: 60rpx;
    background: #DDDDDD;
    border-radius: 30rpx;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
  }

  .handlerBlu {
    background: #1086FF;
    margin-left: 18rpx;
  }

  .btBottom {
    position: fixed;
    bottom: 220rpx;
    left: 50%;
    margin-left: -300rpx;
    width: 600rpx;
  }
</style>
